<template>
  <Col v-bind="actionColOpt" v-if="showActionButtonGroup">
    <div style="width: 100%" :style="{ textAlign: actionColOpt.style.textAlign }">
      <FormItem>
        <slot name="resetBefore"></slot>
        <Button type="default" class="mr-2" v-bind="getResetBtnOptions" @click="resetAction" v-if="showResetButton">
          {{ getResetBtnOptions.text }}
        </Button>
        <slot name="submitBefore"></slot>

        <Button type="primary" class="mr-2" v-bind="getSubmitBtnOptions" @click="submitAction" v-if="showSubmitButton">
          {{ getSubmitBtnOptions.text }}
        </Button>

        <slot name="advanceBefore"></slot>
        <Button type="link" size="small" @click="toggleAdvanced" v-if="showAdvancedButton && !hideAdvanceBtn">
          {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
        </Button>
        <slot name="advanceAfter"></slot>
      </FormItem>
    </div>
  </Col>
</template>
<script lang="ts" setup>
import type { ColEx } from '../types'
//import type { ButtonProps } from 'ant-design-vue/es/button/buttonTypes';
import { computed } from 'vue'
import { Form, Col } from 'ant-design-vue'
import { Button, ButtonProps } from '@/components/Button'
import { BasicArrow } from '@/components/Basic'
import { useFormContext } from '../hooks/useFormContext'
import { useI18n } from '@/hooks/web/useI18n'
import { propTypes } from '@/utils/propTypes'

const FormItem = Form.Item

defineOptions({ name: 'BasicFormAction' })

type ButtonOptions = Partial<ButtonProps> & { text: string }

const props = defineProps({
  showActionButtonGroup: propTypes.bool.def(true),
  showResetButton: propTypes.bool.def(true),
  showSubmitButton: propTypes.bool.def(true),
  showAdvancedButton: propTypes.bool.def(true),
  resetButtonOptions: {
    type: Object as PropType<ButtonOptions>,
    default: () => ({})
  },
  submitButtonOptions: {
    type: Object as PropType<ButtonOptions>,
    default: () => ({})
  },
  actionColOptions: {
    type: Object as PropType<Partial<ColEx>>,
    default: () => ({})
  },
  actionSpan: propTypes.number.def(6),
  isAdvanced: propTypes.bool,
  hideAdvanceBtn: propTypes.bool
})

const emit = defineEmits(['toggle-advanced'])
const { t } = useI18n()

const actionColOpt = computed(() => {
  const { showAdvancedButton, actionSpan: span, actionColOptions } = props
  const actionSpan = 24 - span
  const advancedSpanObj = showAdvancedButton ? { span: actionSpan < 6 ? 24 : actionSpan } : {}
  const actionColOpt: Partial<ColEx> = {
    style: { textAlign: 'right' },
    span: showAdvancedButton ? 6 : 4,
    ...advancedSpanObj,
    ...actionColOptions
  }
  return actionColOpt
})

const getResetBtnOptions = computed((): ButtonOptions => {
  return Object.assign(
    {
      text: t('common.resetText')
    },
    props.resetButtonOptions
  )
})

const getSubmitBtnOptions = computed(() => {
  return Object.assign(
    {
      text: t('common.queryText')
    },
    props.submitButtonOptions
  )
})

function toggleAdvanced() {
  emit('toggle-advanced')
}

const { resetAction, submitAction } = useFormContext()
</script>
